import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  Text,
  ScrollView,
  TouchableOpacity,
} from 'react-native'
import AsyncStorage from '@react-native-community/async-storage';
import NavBar from '../../../components/PublicHeader';
import getStorageValue from '../../../utils/getStorageValue';
import fetchWebApi from '../../../public/WebApi/fetchBase';
import Layer from '../../../utils/Layer';
import Loading from '../../../components/Loading';

import {
  GET_USER_INFO,
  POST_SWITCHACCOUNT
} from '../../../public/WebApi/myInfoDataInterface/userInfoListApi';
import {
  POST_APPPOSITION_ADD
} from '../../../public/WebApi/apiList';
import {
  Constant
} from '../../../public/js/constant';
import {
  GetLocation
} from '../../../utils/GetLocation'

export default class personAccount extends Component {
  constructor(props) {
    super(props)
    const {
      userType,
      sex
    } = this.props.navigation.state.params
    this.state = {
      // tab左边箭头
      returnIcon: require("../../../assets/images/iconResources/returnBnt1.png"),
      topTitle: "个人账户", // 头部标题
      userInfoDatas: [],// 个人资料信息
      userType: userType,// 判断是否为个人 / 企业
      sexSelect: sex, // 性别当前选中的值
      longitude: 500,
      latitude: 500,
      positions: '',
    };
  }

  componentDidMount = () => {
    // 初始化 用户信息
    this.getUserMaillist()
    // 初始化地理定位 信息
    this.getUserLocaltion()

  }
  // 初始化地理定位
  async getUserLocaltion() {
    // Loading.show()
    await GetLocation();
    setTimeout(() => {
      if (Object.keys(GetLocation()._55).length > 0) {
        this.setState({
          latitude: GetLocation()._55.latitude,
          longitude: GetLocation()._55.longitude,
          positions: GetLocation()._55.positions.aois[0].name
        })
        // Loading.hide()
      } else {
        alert("获取地址失败，请重新进入系统！")
      }
    }, 3000)
  }

  // 地理定位 请求
  async position() {
    const {
      latitude,
      longitude,
      positions
    } = this.state
    if (latitude == 500 &&
      longitude == 500) {
      return;
    } else {
      const res = await fetchWebApi(POST_APPPOSITION_ADD,
        {
          token: await getStorageValue(Constant.TOKEN),
          flag: "1",
          lat: latitude,
          lon: longitude,
          placeName: positions
        }, 'POST');
      if (res.status == 200) {
      } else {
        Layer.showMsg(res.msg);
      }
    }
  }

  // 获取用户信息列表
  async getUserMaillist() {
    const res = await fetchWebApi(GET_USER_INFO,
      {
        token: await getStorageValue(Constant.TOKEN)
      }, 'POST');
    if (res.status == 200) {
      this.setState({
        userInfoDatas: res.data
      })
    } else if (res.status === 401) {
      await AsyncStorage.removeItem(Constant.TOKEN);
      this.props.navigation.push('Accountlogin')
      // 弹窗提示
      Layer.showMsg("获取用户信息失败");
      return
    }
  }

  // 账户切换
  async postSwitchAccount() {
    const res = await fetchWebApi(POST_SWITCHACCOUNT,
      {
        token: await getStorageValue(Constant.TOKEN)
      }, 'POST');
    if (res.status == 200) {
      await AsyncStorage.removeItem(Constant.TOKEN);
      if (res.data.token) {
        await AsyncStorage.setItem(
          Constant.TOKEN,
          res.data.token
        );
      }
      const {
        navigation
      } = this.props
      navigation.state.params.getUserMaillistFN()
      navigation.goBack()
      // 地理定位
      this.position()
    } else {
      Layer.showMsg("切换失败");
      return
    }
  }

  // 个人资料列表 
  UserInfoDatasTabBox = () => {
    const {
      userInfoDatas,
      returnIcon,
      sexSelect
    } = this.state
    return (
      <View style={styles.padlr}>
        {userInfoDatas.map((item, index) => (
          <View key={index}>
            <View style={styles.item}>
              <Text style={styles.title}>头像</Text>
              <View style={styles.row}>
                {item.avatar ?
                  <Image style={styles.headPortrait}
                    source={{
                      uri: item.avatar
                    }} /> :
                  <Text style={styles.describe}>暂无头像</Text>}
                <Image style={styles.SystemPrompt}
                  source={returnIcon} />
              </View>
            </View>
            <View style={styles.item}>
              <Text style={styles.title}>昵称</Text>
              <View style={styles.row}>
                <Text style={styles.describe}>{item.nickName ?
                  item.nickName : "暂无昵称"}</Text>
                <Image style={styles.SystemPrompt}
                  source={returnIcon} />
              </View>
            </View>
            <View style={styles.item}>
              <Text style={styles.title}>实名</Text>
              <View style={styles.row}>
                <Text style={styles.describe}>{
                  item.realName == '' ||
                    item.realName == undefined ?
                    '未实名' : item.realName}</Text>
                <Image style={styles.SystemPrompt}
                  source={returnIcon} />
              </View>
            </View>
            <View style={styles.item}>
              <Text style={styles.title}>职业</Text>
              <View style={styles.row}>
                <Text style={styles.describe}>
                  {item.occupation ?
                    item.occupation : "用户未设置职业"}</Text>
                <Image style={styles.SystemPrompt}
                  source={returnIcon} />
              </View>
            </View>
            <View style={styles.item} >
              <Text style={styles.title}>技能标签</Text>
              <View style={styles.row}>
                {item.occupationLabel.map((item, index) => (
                  <View key={index}>
                    <Text style={styles.describe}>{
                      item ? item : "暂无技能标签"}</Text>
                  </View>
                ))}
                <Image style={styles.SystemPrompt}
                  source={returnIcon} />
              </View>
            </View>
            <View style={styles.item}>
              <Text style={styles.title}>性别</Text>
              <View style={styles.row}>
                <Text style={styles.describe}>
                  {sexSelect ? sexSelect : "未选"}
                </Text>
                <Image style={styles.SystemPrompt}
                  source={returnIcon} />
              </View>
            </View>
            <View style={styles.item}>
              <Text style={styles.title}>格言</Text>
              <View style={styles.row}>
                <Text style={styles.describe}>
                  {item.motto ? item.motto : "用户很懒，什么都没写"}
                </Text>
                <Image style={styles.SystemPrompt}
                  source={returnIcon} />
              </View>
            </View>
            <View style={styles.item}>
              <Text style={styles.title}>爱好</Text>
              <View style={styles.row}>
                <Text style={styles.describe}>
                  {item.hobby ?
                    item.hobby : "用户暂未添加爱好"}</Text>
                <Image style={styles.SystemPrompt}
                  source={returnIcon} />
              </View>
            </View>
            <View style={styles.item}>
              <Text style={styles.title}>电话</Text>
              <View style={styles.row}>
                <Text style={styles.describe}>
                  {item.phone ?
                    item.phone : "用户未添加手机号码"}</Text>
                <Image style={styles.SystemPrompt}
                  source={returnIcon} />
              </View>
            </View>
          </View>
        ))
        }
      </View>
    )
  }
  // 个人账户 切换按钮
  switchAccount() {
    return (
      <TouchableOpacity style={styles.enterAccountContainer}
        onPress={() => {
          this.postSwitchAccount()
        }}>
        <View style={styles.enterAccountBtn}>
          <Text style={styles.text}>切换个人账户</Text>
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    const {
      topTitle
    } = this.state
    return (
      <View style={styles.warper}>
        {/* 导航栏 */}
        <Loading />
        <NavBar
          navigation={this.props.navigation}
          title={topTitle}
          titleColor={"#333"}
        />
        {/* 列表 */}
        <ScrollView>
          {/* 个人资料列表 */}
          {this.UserInfoDatasTabBox()}
        </ScrollView>
        {/* 个人账号底部按钮 */}
        {this.switchAccount()}
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  genderEditorModalWarper: {
    flexDirection: "column-reverse",
    backgroundColor: "rgba(0,0,0,0.3)",
    flex: 1
  },
  genderEditorModal: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    width: "100%",
    height: 266,
    paddingLeft: 26,
    paddingRight: 26
  },
  genderEditorModalTitle: {
    height: 60,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderBottomColor: "rgba(240,240,240,0.4)"
  },
  cancelBtn: {
    height: 40,
    width: 40,
    justifyContent: "center",
    alignItems: "center",
  },
  completeBtn: {
    width: 40,
    height: 40,
    justifyContent: "center",
    alignItems: "center"
  },
  completeText: {
    color: "#1890FF",
  },
  EditorAction: {
    width: "100%",
    height: 40,
    marginTop: 30,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F4F4F4",
    borderRadius: 5
  },
  EditorActionNo: {
    width: "100%",
    height: 40,
    marginTop: 30,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
  genderEditorBoxWarper: {
    paddingTop: 10
  },
  warper: {
    flex: 1,
    backgroundColor: "#fff"
  },
  padlr: {
    paddingTop: 15,
    paddingLeft: 15,
    paddingRight: 15,
  },

  item: {
    height: 55,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 5,
    borderBottomColor: "rgb(245,245,245)",
    borderBottomWidth: 1,
    paddingBottom: 10
  },
  row: {
    flexDirection: "row",
    alignItems: "center"
  },
  headPortrait: {
    width: 45,
    height: 50,
    borderRadius: 5
  },
  describe: {
    fontSize: 14,
    color: "#666",
    overflow: 'hidden'
  },
  SystemPrompt: {
    width: 15,
    height: 20,
    marginLeft: 20
  },
  title: {
    fontSize: 16,
    color: "#555",
    marginBottom: 7,
    lineHeight: 55,
    fontWeight: "700"
  },
  enterAccountContainer: {
    position: "absolute",
    bottom: 10,
    width: "100%",
    height: 40,
    paddingLeft: 15,
    paddingRight: 15,
    justifyContent: "center",
    alignItems: "center",
  },
  enterAccountBtn: {
    width: "100%",
    height: 40,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 50,
    backgroundColor: "#1890FF"
  },
  text: {
    color: "#fff",
    fontSize: 18
  },

})